<template>
  <div class="Batchadditionofhouses">
         <!-- 商铺批量添加表头 -->
        <div class="AddCommunitytitle">
            <p>
                <i class="el-icon-arrow-left"></i>
                <span>商铺批量添加</span>
            </p>
            <p>
                <span class="must">*</span>
                <span>为必填项</span>
            </p>
        </div>
        <!-- 商铺批量添加内容板块 -->
        <div class="Batchadditionofhousescontent">
            <div class="infomationleft">
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">社区名称：</span>
                    </p>
                   <el-select v-model="value" placeholder="请选择社区" class="building">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <!-- 房屋编号输入框,下方带文字 -->
                <div class="payloader">
                    <p class="title">
                        <span class="starred"></span>
                        <span class="text"> 房屋起始编号：</span>
                    </p>
                    <el-input
                    placeholder="请选择社区"
                    v-model="input"
                    clearable class="countent">
                    </el-input>
                    <!-- <p class="note">编号统一位数可以补0，如30间房屋，三位就输入030</p> -->
                </div>
                <div class="payloader">
                    <p class="title">
                        <!-- <span class="starred"></span>
                        <span class="text"> 房屋结束编号：</span> -->
                    </p>
                    <p class="note">编号统一位数可以补0，如30间房屋，三位就输入030</p>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred"></span>
                        <span class="text"> 总楼层：</span>
                    </p>
                    <el-input
                    placeholder=""
                    v-model="input"
                    clearable class="countent">
                    </el-input>
                </div>
            </div>
             <div class="infomationleft">
                <div class="payloader">
                    <p class="title">
                        <span class="starred">*</span>
                        <span class="text">商铺区域：</span>
                    </p>
                   <el-select v-model="value" placeholder="请选择楼宇" class="building">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" >
                        </el-option>
                    </el-select>
                </div>
                <div class="payloader">
                    <p class="title">
                        <span class="starred"></span>
                        <span class="text"> 房屋结束编号：</span>
                    </p>
                    <el-input
                    placeholder=""
                    v-model="input"
                    clearable class="countent">
                    </el-input>
                </div>
                
            </div>
        </div>
        <!-- 商铺批量添加保存按钮 -->
        <div class="contentfooter">
            <el-button type="primary" class="savebutton" @click="save"><i class="el-icon-document-checked"></i>保存</el-button>
            <el-button plain class="reseatebutton" @click="reseate"><i class="el-icon-refresh-left"></i>重置</el-button>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            input:'',   //输入框
            value:'',   //下拉选项框
            options: [{
            value: '选项1',
            label: '黄金糕'
            }, {
            value: '选项2',
            label: '双皮奶'
            }, {
            value: '选项3',
            label: '蚵仔煎'
            }, {
            value: '选项4',
            label: '龙须面'
            }, {
            value: '选项5',
            label: '北京烤鸭'
            }],     //下拉选项
        }
    },
    methods:{
        // 批量添加房屋底部保存 重置按钮
        save(){
            console.log("保存")
        },
        reseate(){
            console.log("重置")
        }
    }
}
</script>

<style lang="scss" scoped>
    .Batchadditionofhouses{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        // 批量添加标题
        .AddCommunitytitle{
            height: 60px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            & p:nth-child(1){
                color: #666666;
                font-size: 16px;
                font-family: 'Font Awesome 5 Pro Solid', 'Font Awesome 5 Pro';
                font-weight: 900;
                font-style: normal;
                height: 28px;
                line-height: 28px;
                .el-icon-arrow-left{
                    font-size: 16px !important;
                    color: #666666;
                    font-weight: 900 !important;
                }
            }
            & p:nth-child(2){
                color: #999;
                font-size: 12px;
                .must{
                    color: #FF3B30;
                    margin-right: 5px;
                }
            }
        }
        // 批量添加商铺输入内容板块
        .Batchadditionofhousescontent{
            width: 100%;
            padding: 0 60px 40px 40px;
            box-sizing: border-box;
            background-color: #fff;
            border-bottom: 1px solid rgba(242, 242, 242, 1);
            display: flex;
            justify-content: space-between;
            .infomationleft{
                width: 520px;
                margin-top: 30px;
                .payloader{
                    width: 100%;
                    height: 40px;
                    margin-bottom: 25px;
                    display: flex;
                    align-items: center;
                    .title{
                        width: 120px;
                        padding-right: 20px;
                        font-size: 14px;
                        color: #666666;
                        box-sizing: border-box;
                        text-align: right;
                        .starred{
                            color: #FF3B30;
                        }
                    }
                    .note{
                        font-size: 14px;
                        color: #666666;
                    }
                    .countent{
                        width: 400px;
                        ::v-deep .el-input__inner:focus {
                            border-color: #C0C4CC !important;
                            outline: 0;
                        }
                    }
                    .datapicker{
                        width: 400px;
                        ::v-deep .el-input__inner:focus {
                            border-color: #C0C4CC !important;
                            outline: 0;
                        }
                    }
                    .storeid,.building{
                        width: 400px;
                            ::v-deep .el-input__inner {
                                border-color: #C0C4CC !important;
                            }
                    }
                    
                }
            }
        }
        // 批量添加商铺底部按钮
        .contentfooter{
            width: 100%;
            box-sizing: border-box;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            .savebutton,.reseatebutton{
                width: 140px;
                height: 40px;
                i{
                    margin-right: 5px;
                }
            }
            .savebutton{
                margin-right: 40px;
            }
            .createbutton{
                width: 160px;
                height: 40px;
                i{
                    margin-right: 5px;
                }
            }
            .el-button--primary{
                background-color: rgba(0, 121, 254, 1);
            }
            .el-button--primary:hover {
                background: #3394fe !important;
                border-color: #3394fe !important;
                color: #FFF !important;
            }
            .el-button.is-plain{
                border-color: rgba(0, 121, 254, 1);
                color: rgba(0, 121, 254, 1);
            }
            .el-button.is-plain:hover {
                background: #FFF;
                border-color: #409EFF;
                color: #409EFF !important;
            }
        }
    }
</style>